<style>
  div {
    display: flex; 
    flex-wrap: wrap;
    justify-content: space-between;
  }
  span {
    background: royalblue;
    padding: 0.5em 3em;
    margin: 1em;
    font-size: larger;
    font-weight: bold;
    font-family: Verdana;
    color: white;
  }

  span:hover, span:focus {
    background: hotpink;
    outline: none;
  }
</style>
<h1>108000253</h1>
<div class=nums>
	<span tabindex=0>1</span><span tabindex=0>2</span><span tabindex=0>3</span><span tabindex=0>4</span><span tabindex=0>5</span><span tabindex=0>6</span><span tabindex=0>7</span><span tabindex=0>8</span><span tabindex=0>9</span><span tabindex=0>10</span><span tabindex=0>11</span><span tabindex=0>12</span><span tabindex=0>13</span><span tabindex=0>14</span><span tabindex=0>15</span><span tabindex=0>16</span><span tabindex=0>17</span><span tabindex=0>18</span><span tabindex=0>19</span><span tabindex=0>20</span><span tabindex=0>21</span><span tabindex=0>22</span><span tabindex=0>23</span><span tabindex=0>24</span><span tabindex=0>25</span><span tabindex=0>26</span><span tabindex=0>27</span><span tabindex=0>28</span><span tabindex=0>29</span><span tabindex=0>30</span><span tabindex=0>31</span><span tabindex=0>32</span><span tabindex=0>33</span><span tabindex=0>34</span><span tabindex=0>35</span><span tabindex=0>36</span><span tabindex=0>37</span><span tabindex=0>38</span><span tabindex=0>39</span>
</div>
<button>Shuffle
  <script>
    document.currentScript.parentElement.onclick = () => {
      const z = document.querySelector('.nums');
      const x = Array.from(z.children);
      const frag = document.createDocumentFragment();
      x.sort((a,b) => Math.random() - 0.5);
      z.innerHTML = '';
      x.forEach(el => frag.appendChild(el));
      z.appendChild(frag);
    };
  </script>
</button>
